<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
                    <div class="itemImg">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="itemInfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥ {{ item.price }}元</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import request from '@/utils/request.js'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const pagination = ref(1)
const isLoading = ref(false)
// onMounted(() => {
//     console.log('生命周期onMounted')
//     request.get('/list', {
//         params: {
//             pagination: 1,
//             pageNum: 10
//         }
//     }).then(res => {
//         if (res.data.code == 200) {
//             list.value = res.data.data
//         }
//     })
// })
const onLoad = () => {
    // 先展示loading
    loading.value = true
    // 请求数据
    request.get('/list', {
        params: {
            pagination: pagination.value, // 2  // 3
            pageNum: 10
        }
    }).then(res => {
        if (res.data.code == 200) {
            // list.value = res.data.data
            // 数组的拼接 --- concat  / es6中的扩展运算
            // list.value = list.value.concat(res.data.data)
            list.value = [...list.value, ...res.data.data]
        }
        // 关闭loading
        loading.value = false
        // 页码+1
        pagination.value++
        // 当所有数据请求完成给finished赋值为true
        if (list.value.length >= res.data.total) {
            finished.value = true
        }
    })

}
const onRefresh = () => {
    // 展示loading
    isLoading.value = true
    setTimeout(() => {
        isLoading.value = false
    }, 1000)
}
</script>
<style lang="scss" scoped>
ul {
    /*  定义列数 */
    column-count: 2;
    column-gap: 10px;

    li {
        break-inside: avoid; // 避免在元素内部换行

        .itemImg {
            img {
                width: 100%;
            }
        }

        .itemInfo {
            padding: 2px 8px;

            .price {
                color: red
            }
        }
    }
}
</style>